<template>
  <div class="summary-panel">
    <div class="summary" :style="{height: expandType ? 'auto' : '90px'}">
      <div class="summary-inner"
           id="summary-inner"
           v-html="videoInfo.introduction"></div>
    </div>
    <div class="expand-btn"
    v-show="showExpandBtn" @click="expand">
      {{expandType ? '收起' : '展开全部'}}
    </div>
    <div class="tag-list">
      <router-link
        :to="`/tag/${item.id}`"
        class="tag-item"
        target="_blank"
        v-for="item in videoInfo.tags">
        {{item}}
      </router-link>
    </div>
  </div>
</template>
<script setup>
import {getCurrentInstance, inject, nextTick, onMounted, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";

const {proxy} = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const videoInfo = inject('videoInfo');

const showExpandBtn = ref(false);
const expandType = ref(false);

const expand = () => {
  expandType.value = !expandType.value;
};


const ExpandHeight = () => {
  const height = document.querySelector('.summary-inner').scrollHeight;
  if(height > 90){
    expandType.value = false;
    showExpandBtn.value = true;
  }else{
    expandType.value = true;
    showExpandBtn.value = false;
  }
};

onMounted(() => {
  ExpandHeight();
});
</script>
<style scoped lang="scss">
.summary-panel{
  padding: 10px 0 6px 0;
  border-bottom: 1px solid #ddd;
  .summary{
    overflow: hidden;
  }
  .expand-btn{
    display: inline-block;
    color: #61666d;
    font-size: 13px;
    margin-top: 5px;
    cursor: pointer;
    &:hover{
      color: #0c73c5;
    }
  }
  .tag-list{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    .tag-item{
     cursor: pointer;
      text-decoration: none;
      font-size: 13px;
      color: #61666d;
      background: #f1f2f3;
      border-radius: 16px;
      height: 32px;
      line-height: 32px;
      padding: 0 12px;
      margin: 0 12px 8px 0;
    }
  }
}
</style>